﻿<template>
  <div class = "login_bgContent">
    <!--背景图-->
    <img src = "static/style/common/images/loginBg.jpg" alt = "图片路径不正确">
    <!-- 上部的logo -->
    <div class = "login_logo">
      <img src = "static/style/common/images/loginLogo.png" alt="">
      <span>新华书店荐购平台</span>
    </div>
    <!-- form表单部分 -->
    <div class = "login_formContent">
      <!--标题部分-->
      <div class = "login_titleInfo">系统登录</div>
      <!-- 输入部分 -->
      <div class = "login_inputContainter">
        <!-- 错误提示 -->
        <div class = "login_notice" v-show = 'showNotice'>
          <i class = "iconfont icon-gantanhao"></i>
          <span class = "login_noticeInfo">{{noticeWord}}</span>
        </div>
        <!-- 用户名 -->
        <div class = "login_inputContent login_inputMargin">
          <div class = "login_inputLabel">用户名</div>
          <el-input type = "text" placeholder = "请输入您的用户名" v-model = 'userName' @keyup.enter.native = 'submitLogin' autocomplete = "off"></el-input>
        </div>
        <!-- 密码 -->
        <div class = "login_inputContent">
          <div class = "login_inputLabel">密码</div>
          <el-input show-password placeholder = "请输入您的密码" v-model = 'passWord' @keyup.enter.native = 'submitLogin' autocomplete = "off"></el-input>
        </div>
        <!-- 忘记密码的链接 -->
        <div class = "login_forgetPwd">
          <a href = "javascript:void(0)" @click = 'forgetPwd'>忘记密码？</a>
        </div>
        <!-- 登录按钮 -->
        <el-button class = "login_submit" type = "primary" @click = 'submitLogin' :loading = 'loading'>登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
      </div>
    </div>
    <!-- 底部的文字 -->
    <div class="login_footer">2021©武汉飞加网络科技. ALL Rights Reserved.</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userName: '',
      passWord: '',
      noticeWord: '',
      showNotice: false,
      loading: false
    }
  },
  methods: {
    // 请求登录的方法
    submitLogin () {
      if (!this.$trim(this.userName)) {
        this.noticeWord = '请输入您的用户名'
        this.showNotice = true
      } else if (!this.$trim(this.passWord)) {
        this.noticeWord = '请输入您的密码'
        this.showNotice = true
      } else {
        this.loading = true
        this.$post('/auth/' + this.userName, {
          'id': this.userName,
          'pw': this.passWord
        }).then((data) => {
          const list = data.data.result.split('.')
          const str = atob(list[1].replace(/-/g, '+').replace(/_/g, '/'))
          const loginInfo = JSON.parse(str)
          if (sessionStorage) {
            sessionStorage.clear()
          }
          if (loginInfo) {
            // 登录账号的name/username
            if (loginInfo.name) {
              sessionStorage.setItem('userName', decodeURIComponent(loginInfo.name))
            } else {
              if (loginInfo.usertype === 'System') {
                sessionStorage.setItem('userName', '系统管理员')
              } else {
                sessionStorage.setItem('userName', '佚名')
              }
            }
            // 用户的uid，更换密码的时候会使用(登录者的唯一编码)
            sessionStorage.setItem('userUid', loginInfo.Login_UID)
            // 用户类型(R999为超级管理员)
            sessionStorage.setItem('userType', loginInfo.usertype)
            // 用户编号
            sessionStorage.setItem('userNo', loginInfo.userno)
            // 登录者的角色(职位)编号，多个角色已逗号分隔，GM--经理
            sessionStorage.setItem('roleNo', loginInfo.roleno)
            // 执行流程时对应的变量为 $_login_id
            sessionStorage.setItem('nameId', loginInfo.nameid)
            // 用户图片
            sessionStorage.setItem('avatar', loginInfo.avatar)
            // 登录成功后，改变state中的值
            this.$store.dispatch('isLogin', loginInfo)
          }
          sessionStorage.setItem('token', data.data.result)
          if (window.location.href.indexOf('?') > 0 && window.location.href.indexOf('?redirect') < 0) {
            let baseUrl = decodeURIComponent(window.location.href.slice(window.location.href.indexOf('?') + 1))
            if (baseUrl.indexOf('?') > -1) {
              window.location.href = baseUrl + '&_token=' + data.data.result
            } else {
              window.location.href = baseUrl + '?_token=' + data.data.result
            }
          } else {
            this.getMenu()
          }
          // 获取文件上传的token
          // this.getFileToken()
        }).catch(() => {
          this.noticeWord = '用户名或密码错误'
          this.showNotice = true
          this.loading = false
        })
      }
    },
    // 获取当前登录者的菜单
    getMenu () {
      this.$get('/menu').then(data => {
        if (data.status === 200) {
          if (data.data.result.length) {
            let toUrl = ''
            let routerNavList = []
            for (let i = 0; i < data.data.result.length; i++) {
              if (data.data.result[i].function_url && data.data.result[i].url_type === 'Router') {
                toUrl = toUrl || data.data.result[i].function_url
                routerNavList.push(data.data.result[i])
              }
            }
            sessionStorage.setItem('routerNavList', (routerNavList && routerNavList.length) ? JSON.stringify(routerNavList) : '')
            if (toUrl) {
              this.$router.push(toUrl)
            } else {
              this.$message({
                message: '请检查配置的功能地址（function_url）是否正确',
                type: 'warning'
              })
            }
          } else {
            this.$message({
              message: '该账号暂无功能权限，请联系管理员添加权限',
              type: 'warning'
            })
          }
        }
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    // 获取文件上传的token
    getFileToken () {
      this.$get('/system/fileservice/token').then(data => {
        console.log(data)
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          sessionStorage.setItem('fileToken', dataResult.data)
        } else {
          this.$message({
            message: dataResult.msg,
            type: 'error',
            duration: 3000
          })
        }
      })
    },
    // 点击忘记密码的按钮
    forgetPwd () {
      this.$message({
        message: '请联系管理员，重置密码',
        type: 'success'
      })
    }
  }
}
</script>
